import React, { Component } from 'react';
import { connect } from 'react-redux'
class App extends Component {
 
    render() {
        return (
            <div>
                <div>
                    <input onChange={this.props.changeMsg} value={this.props.msg} />
                    <button onClick={this.props.addItem.bind(this)}>增加{this.props.msg}</button>

                    <ul>
                        {
                            this.props.list.map((item,index)=>{
                            return <li key={index}>{item} <button onClick={this.props.delItem(index)}>删除</button> </li>
                            })
                        }
                    </ul>
                </div>
            </div>
        );
    }
}

const dispatchToProps = dispacth => {
    return {
        changeMsg(e) {
            dispacth({
                type: 'changeMsg',
                value: e.target.value
            })
        },
        addItem(){
            dispacth({
                type:'addItem',
                value:this.props.msg
            })
        },
        delItem(value){
            return ()=>{
                dispacth({
                    type:'delItem',
                    value
                })
            }
        }
    }
}
export default connect(state=>state, dispatchToProps)(App)